<!--
 * @Date: 2022-04-07 10:23:22
 * @Author: 陶子
 * @LastEditTime: 2022-04-07 18:15:40
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\mine\feedback.vue
 * @pageName: 这是--(意见反馈)--页面
-->
<template>
  <div class="wrap">
    <Navbar :appTitle="title" />
    <div class="feedback">
      <div class="feedback-msg">
        <div class="feedback-msgtit">
          反馈内容
        </div>
        <van-field v-model="formdata.idea" rows="3" input-align="left" autosize label="" type="textarea" maxlength="50" placeholder="请留下您的意见" class="feed-textarea" />
        <div class="feedback-msgtit" style="margin-top:0.15rem">
          附件<span>(最多可上传9张图片，只支持jpg格式)</span>
        </div>
        <div class="feedback-up">
          <van-uploader accept='.jpg' :after-read="afterRead" :before-delete="beforeDelete" :max-count="9" v-model="fileList">
            <img class="uplimg" src="@/assets/img/addIcon.png" />
          </van-uploader>
        </div>
      </div>
      <div class="feedback-lx">
        <div class="feedback-list">
          <div class="">联系人</div>
          <input type="text" placeholder="请输入您的称谓" v-model="formdata.name">
        </div>
        <div class="feedback-list">
          <div class="concatPhone">联系电话</div>
          <input type="number" placeholder="请输入手机号码" v-model="formdata.mobile">
        </div>
      </div>
      <div class="feedback-btn" @click="submitOk">
        <div class='innerBox'>提交</div>
      </div>

    </div>

  </div>
</template>
<script>
import Navbar from "@/components/navBar/navBar_right";
import { uploadAction } from "@/api/manage";
import { feedbackAddApi } from "@/api/mobile";
export default {
  data() {
    return {
      title: this.$route.meta.title,
      formdata: {},
      fileList: [],
      ids: [],
    };
  },
  components: {
    Navbar,
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitOk() {
      this.formdata.attachment = this.ids.join(",");
      if (!this.formdata.mobile && !this.checkPhone(this.formdata.mobile)) {
        return;
      }
      feedbackAddApi(this.formdata).then((res) => {
        if (res.success) {
          this.$toast(res.message);
          this.$router.replace({
            path: "/mine",
          });
        }
      });
    },
    checkPhone(phone) {
      let reg_tel = /^[1][3,4,5,7,8,9][0-9]{9}$/; //11位手机号码正则
      if (!reg_tel.test(phone)) {
        this.$toast("请正确填写您的联系电话！");
        return false;
      } else {
        return true;
      }
    },
    afterRead(v) {
      let formData = new FormData();
      formData.append("file", v.file);
      formData.append("biz", "temp");
      uploadAction("/sys/common/upload2", formData).then((res) => {
        if (res.success) {
          this.ids.push(res.result.id);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    beforeDelete(file, detail) {
      let deleteIndex = detail.index;
      this.ids.splice(deleteIndex, 1);
      return true;
    },
  },
};
</script>
<style lang='scss' scoped>
.feedback-list {
  background: #fff;
  display: flex;
  line-height: 35px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  border-bottom: 1px solid #eeeeee;
  input {
    text-align: right;
  }
}
.feedback {
  .feedback-msg {
    background: #fff;
    padding: 0.16rem;
    margin-top: 0.1rem;
  }
  .feedback-msgtit {
    position: relative;
    padding-left: 0.13rem;
    font-size: 0.15rem;
    span {
      font-size: 0.1rem;
    }
  }
  .feedback-msgtit::after {
    position: absolute;
    background: #1890ff;
    width: 0.03rem;
    height: 0.15rem;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .feed-textarea {
    background: #f6f6f6;
    border-radius: 0.08rem;
    margin-top: 0.12rem;
    color: #a9a9a9;
  }
  .feedback-up {
    margin-top: 0.13rem;
  }
  .feedback-lx {
    margin-top: 0.1rem;
    padding: 0px 16px;
    background: #fff;
    .feedback-list {
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .feedback-btn {
    width: 3.75rem;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0.05rem 0.1rem;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    .innerBox {
      width: 100%;
      height: 100%;
      background: #1890ff;
      border: 0.01rem solid rgba(25, 31, 37, 0.12);
      border-radius: 0.02rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.16rem;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}

/deep/.van-image__img {
  // #F6F6F6
  background: #f6f6f6;
  border-radius: 5px;
  width: 0.78rem;
  height: 0.78rem;
}
.concatPhone::before {
  content: "*";
  color: red;
  position: absolute;
  left: 0.06rem;
}
.uplimg {
  width: 0.78rem;
  height: 0.78rem;
}
</style>
